<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Accpet-CH" content="Sec-CH-UA-Platform-Version" />

    <!-- DNS Prefetch -->
    <link rel="dns-prefetch" href="http://cdn.oss.cyue.site" />
    <link rel="dns-prefetch" href="http://cdn.oss.cyue.net" />
    <link rel="dns-prefetch" href="https://cdn.staticfile.org" />


    <!-- 信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>文章</title>
    <meta name="author" content="尘跃" />
    <meta name="description" content="文章" />

    <!-- Facebook Open Graph -->
    <meta property="og:site_name" content="" />
    <meta property="og:title" content="article" />
    <meta property="og:type" content="article">
    <meta property="og:url" content="http://cyue.net">
    <meta property="og:image" content="http://cyue.net/favicon.png" />
    <meta property="og:description" content="文章" />

    <!-- Twitter Cards -->
    <meta name=twitter:card content="summary" />
    <meta name=twitter:image content="http://cyue.net/favicon.png" />
    <meta name="twitter:title" content="article" />
    <meta name=twitter:description content="文章" />
    <meta name="twitter:creator" content="" />
    <meta name="twitter:site" content="@cyue.net" />

    <!-- style -->
    <link rel="stylesheet/less" type="text/css" href="/css/style.less">
    <link rel="stylesheet" href="/css/article.css">
    <link rel="stylesheet" href="/css/twikoo.css">
    <!-- less -->
    <script src="/js/third/less.min.js"></script>

    <!-- website configuration -->
    <script src="/js/configuration.js"></script>
    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>
    <!-- WX JS SDK -->
    <script src="/js/wx.js"></script>
    <!-- Google ADS -->
    <!-- <meta name="google-adsense-account" content="ca-pub-7556556693775855">
    <script src="/js/ads.js"></script> -->

    <style>
        #article-info-sort > *,
        #article-info-set > *,
        #article-info-tag > * {
            margin-left: 0.5em;
        }

        #article-info-sort > *:first-child,
        #article-info-set > *:first-child,
        #article-info-tag > *:first-child {
            margin-left: 0;
        }

        .like,
        .unlike {
            width: 1.5em;
            height: 1.5em;
            transition: all 0s;
        }

        .like:hover,
        .unlike:hover {
            cursor: pointer;
            fill: var(--color-text-lighting);
        }
    </style>
</head>

<body style="display: none;">
    <page-header></page-header>


    <!-- <div class="block-spacer"></div>
    <div class="block-spacer"></div> -->
    <main>
        <!-- 主要内容 -->
        <div class="flex-column flex-1">
            <div class="panel">
                <article>
                    <h1 id="article-title" class="article-title">标题</h1>
                    <div class="article-author-container">
                        <span>作者：</span>
                        <a class="article-author" href="#">？？？</a>
                    </div>
                    <h4 class="article-date">2023/1/1</h4>

                    <!-- <div class="block-spacer"></div> -->
                    <hr />

                </article>

                <div class="flex-row" style="justify-content: space-between;">
                    <!-- 些许信息 -->
                    <div id="article-info-block" class="border-box flex-column" style="padding: 1rem;gap: 0.5em;">
                        <div id="article-info-view" style="display: flex;">
                            <span>浏览</span>
                            <span id="article-info-view-count" style="margin: 0 0.5em;">0</span>
                        </div>
                        <div id="article-info-sort" style="display: flex;flex-wrap: wrap;">
                            分类：
                        </div>
                        <div id="article-info-set" style="display: none;flex-wrap: wrap;">
                            合集：
                        </div>
                        <div id="article-info-tag" style="display: none;flex-wrap: wrap;">
                            标签：
                        </div>
                        <div>
                            <a href="#" onclick="alert('暂未开发')" style="width: fit-content;">上一篇</a>
                        </div>
                        <div>
                            <a href="#" onclick="alert('暂未开发')" style="width: fit-content;">下一篇</a>
                        </div>
                    </div>

                    <!-- 推荐与反对 -->
                    <div class="container-like border-box flex-row flex-items-center" style="padding: 1rem;gap: 1em;display: none;">
                        <div class="flex-column flex-items-center">
                            <div class="like">
                                <svg style="width: 100%;height: 100%;" t="1714009694808" class="icon"
                                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4283"
                                    width="200" height="200">
                                    <path
                                        d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                        p-id="4284"></path>
                                </svg>
                            </div>
                            <div>
                                <span>推荐</span>
                            </div>
                            <div>
                                (
                                <span id="article-info-like-count">0</span>
                                )
                            </div>
                        </div>
                        <div class="flex-column flex-items-center">
                            <div class="unlike">
                                <svg style="width: 100%;height: 100%;transform: scaleY(-1);" t="1714009694808"
                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4283" width="200" height="200">
                                    <path
                                        d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                        p-id="4284"></path>
                                </svg>
                            </div>
                            <div>
                                <span>反对</span>
                            </div>
                            <div>
                                (
                                <span id="article-info-unlike-count">0</span>
                                )
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- twikoo -->
            <div id="div-twikoo" class="sm-margin-2rem-top" style="display: none;">
                <!-- <div class="block-spacer"></div> -->
                <div id="panel-twikoo" class="panel">
                    <div id="twikoo"></div>
                </div>
            </div>

            <!-- 评论板块 -->
            <div id="div-comment" class="sm-margin-2rem-top" style="display: none;">
                <div id="panel-comment" class="panel">
                    <div class="twikoo">
                        <form class="tk-submit">
                            <div class="tk-row">
                                <div class="tk-avatar tk-has-avatar">
                                    <!---->
                                    <img class="tk-avatar-img" src="../images/image.default.png" alt="头像">
                                </div>
                                <div class="tk-col">
                                    <div class="tk-meta-input">
                                        <div class="el-input el-input--small el-input-group el-input-group--prepend">
                                            <div class="el-input-group__prepend">昵称</div>
                                            <input
                                                class="el-input__inner"
                                                type="text"
                                                autocomplete="off"
                                                name="commenter"
                                                placeholder="必填"
                                            >
                                        </div>
                                        <div class="el-input el-input--small el-input-group el-input-group--prepend">
                                            <div class="el-input-group__prepend">邮箱</div>
                                            <input
                                                class="el-input__inner"
                                                type="email"
                                                autocomplete="off"
                                                name="commenter_email"
                                                placeholder="必填"
                                            >
                                        </div>
                                        <div class="el-input el-input--small el-input-group el-input-group--prepend">
                                            <div class="el-input-group__prepend">网址</div>
                                            <input
                                                class="el-input__inner"
                                                type="text"
                                                autocomplete="off"
                                                name="commenter_site"
                                                placeholder="选填"
                                            >
                                        </div>
                                    </div>
                                    <div class="tk-input el-textarea">
                                        <textarea
                                            autocomplete="off"
                                            placeholder=""
                                            maxlength="500"
                                            class="el-textarea__inner"
                                            style="min-height: 44.6px; height: 44.6px;"
                                            name="content"
                                        ></textarea>
                                        <span class="el-input__count">0/500</span>
                                    </div>
                                </div>
                            </div>

                            <div class="tk-row actions">
                                <div class="tk-row-actions-start">
                                    <div class="tk-submit-action-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                            <path
                                                d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z">
                                            </path>
                                        </svg>
                                    </div>
                                </div>
                                <a alt="Markdown is supported"
                                    href="https://guides.github.com/features/mastering-markdown/" target="_blank"
                                    rel="noopener noreferrer" class="tk-submit-action-icon __markdown">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
                                        <path
                                            d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z">
                                        </path>
                                    </svg>
                                </a>
                                <button
                                    type="button"
                                    class="el-button tk-preview el-button--default el-button--small"
                                >
                                    <span>预览</span>
                                </button>
                                <button
                                    disabled="disabled"
                                    type="submit"
                                    class="el-button tk-send el-button--primary el-button--small is-disabled">
                                    <span>发送</span>
                                </button>
                            </div>
                            <div class="tk-preview-container" style="display: none;"></div>
                        </form>
                        <div class="tk-comments-container">
                            <div class="tk-comments-title">
                                <span class="tk-comments-count">
                                    <span>评论数量</span>
                                    <span>条评论</span>
                                </span>
                                <span class="tk-icon __comments comments-refresh" style="color: #409eff;">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                        <path
                                            d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z">
                                        </path>
                                    </svg>
                                </span>
                            </div>
                            <!-- 没有评论 -->
                            <div class="tk-comments-no">
                                <span>没有评论</span>
                            </div>
                            <!-- 评论模板 -->
                            <template id="template-comment">
                                <div id="comment-id" class="tk-comment">
                                    <div class="tk-avatar tk-has-avatar" nick="nickname">
                                        <img
                                            src="../images/image.default.png"
                                            alt="" class="tk-avatar-img"
                                        >
                                    </div>
                                    <div class="tk-main">
                                        <div class="tk-row">
                                            <div class="tk-meta">
                                                <a
                                                    href=""
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    class="tk-nick tk-nick-link"
                                                >
                                                    <strong>nickname</strong>
                                                </a>
                                                <span class="tk-tag tk-tag-green" style="display: none;">站长</span>
                                                <small class="tk-time">
                                                    <time
                                                        datetime="time"
                                                        title="time"
                                                    >
                                                        datetime
                                                    </time>
                                                </small>
                                            </div>
                                            <div class="tk-action">
                                                <a href="#" class="tk-action-link">
                                                    <!-- 点赞图标 -->
                                                    <span class="tk-action-icon">
                                                        <svg
                                                            xmlns="http://www.w3.org/2000/svg"
                                                            viewBox="0 0 512 512"
                                                        >
                                                            <path
                                                                d="M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z">
                                                            </path>
                                                        </svg>
                                                    </span>
                                                    <!-- 点赞图标solid -->
                                                    <span class="tk-action-icon tk-action-icon-solid">
                                                        <svg
                                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                            <path
                                                                d="M104 224H24c-13.255 0-24 10.745-24 24v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zM64 472c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zM384 81.452c0 42.416-25.97 66.208-33.277 94.548h101.723c33.397 0 59.397 27.746 59.553 58.098.084 17.938-7.546 37.249-19.439 49.197l-.11.11c9.836 23.337 8.237 56.037-9.308 79.469 8.681 25.895-.069 57.704-16.382 74.757 4.298 17.598 2.244 32.575-6.148 44.632C440.202 511.587 389.616 512 346.839 512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2 1.282-6.271 3.558-8.521 39.614-39.144 56.648-80.587 89.117-113.111 14.804-14.832 20.188-37.236 25.393-58.902C282.515 39.293 291.817 0 312 0c24 0 72 8 72 81.452z">
                                                            </path>
                                                        </svg>
                                                    </span>
                                                    <!-- 数量 -->
                                                    <span class="tk-action-count"></span>
                                                </a>
                                                <a href="#" class="tk-action-link">
                                                    <!-- 评论图标 -->
                                                    <span class="tk-action-icon">
                                                        <svg
                                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                            <path
                                                                d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z">
                                                            </path>
                                                        </svg>
                                                    </span>
                                                    <!-- 评论图标solid -->
                                                    <span class="tk-action-icon tk-action-icon-solid">
                                                        <svg
                                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                            <path
                                                                d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z">
                                                            </path>
                                                        </svg>
                                                    </span>
                                                    <span class="tk-action-count"></span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="tk-content">
                                            <span>
                                                <p>评论内容</p>
                                            </span>
                                        </div>
                                        <div class="tk-extras">
                                            <div class="tk-extra">
                                                <!-- 坐标图标 -->
                                                <span class="tk-icon __comment">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                                        <path
                                                            d="M444.52 3.52L28.74 195.42c-47.97 22.39-31.98 92.75 19.19 92.75h175.91v175.91c0 51.17 70.36 67.17 92.75 19.19l191.9-415.78c15.99-38.39-25.59-79.97-63.97-63.97z">
                                                        </path>
                                                    </svg>
                                                </span>
                                                <span class="tk-extra-text">省份</span>
                                            </div>
                                            <div class="tk-extra">
                                                <span class="tk-icon __comment">
                                                    <svg
                                                        t="1720770369973"
                                                        viewBox="0 0 1168 1024"
                                                        version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        p-id="4265"
                                                    >
                                                    <path
                                                        d="M787.333831 588.946093a75.189984 75.189984 0 0 0-75.093984 75.092984 75.189984 75.189984 0 0 0 75.093984 75.093984 75.165984 75.165984 0 0 0 75.067984-75.093984 75.165984 75.165984 0 0 0-75.067984-75.092984m0 222.841953a147.919968 147.919968 0 0 1-147.749968-147.748969c0-81.455982 66.292986-147.747968 147.749968-147.747968 81.431983 0 147.747968 66.291986 147.747968 147.747968 0 81.480982-66.315986 147.748968-147.747968 147.748969m89.452981 102.106978c0.342 0.244 1.317 0.585 2.315999 0.585h0.122l71.484985-39.496992c-1.706-4.022999-9.605998-23.478995-9.605998-43.739991a113.858976 113.858976 0 0 1 107.739977-113.613975c0.853-4.729999 5.557999-31.524993 5.557998-51.639989s-4.704999-46.88399-5.559998-51.637989a113.858976 113.858976 0 0 1-107.737977-113.565976c0-20.357996 7.923998-39.813991 9.605998-43.81299l-70.313985-39.057992-0.293-0.025a5.339999 5.339999 0 0 0-2.706 0.732 196.753958 196.753958 0 0 1-26.014994 21.819995c-21.699995 15.239997-42.153991 22.967995-60.951987 22.967995-18.919996 0-39.594991-7.874998-61.390987-23.405995a194.705958 194.705958 0 0 1-26.160994-22.283995 5.777999 5.777999 0 0 0-2.729999-0.707h-0.245l-72.824985 40.032992c1.706 4.046999 9.579998 23.479995 9.579998 43.73999A113.858976 113.858976 0 0 1 528.896886 614.350088c-0.854 4.729999-5.509999 31.524993-5.509998 51.639989s4.655999 46.90799 5.533998 51.661989a113.858976 113.858976 0 0 1 107.763977 113.589975c0 20.334996-7.972998 39.863991-9.679998 43.788991l68.973985 38.545992h0.146c1.024 0 1.95-0.365 2.317-0.585a200.849957 200.849957 0 0 1 26.428994-23.161995c22.088995-16.188997 43.079991-24.429995 62.414987-24.429995 19.552996 0 40.715991 8.387998 62.949986 24.917995 14.921997 11.068998 25.259995 22.185995 26.551995 23.575995m22.673995 108.397976c-13.774997-0.025-27.135994-5.704999-35.765993-15.213996-11.775997-12.896997-49.005989-46.44599-79.530982-46.44599-30.280993 0-68.119985 33.767993-78.993984 45.54399-8.606998 9.386998-21.869995 14.969997-35.499992 14.969997-6.483999 0-12.603997-1.243-18.186996-3.706l-0.975-0.414-92.69698-51.833988-0.926-0.683a44.46999 44.46999 0 0 1-14.920996-53.735989c0.049-0.146 8.532998-19.699996 8.532998-37.594992a98.376979 98.376979 0 0 0-98.254979-98.254978h-3.900999c-15.505997 0-28.159994-13.799997-32.182993-35.108993-0.341-1.706-7.923998-42.178991-7.923999-74.044984 0-31.913993 7.557998-72.361984 7.899999-74.117984 4.119999-21.576995 16.992996-35.449992 32.816993-35.083993h3.266999a98.400979 98.400979 0 0 0 98.279979-98.303978c0-17.846996-8.484998-37.399992-8.559998-37.619992a44.34899 44.34899 0 0 1 15.068996-53.661989l0.95-0.658 97.839979-53.759988 1.025-0.415c5.485999-2.364999 11.507998-3.534999 17.895996-3.534999 13.604997 0 26.891994 5.436999 35.595992 14.629997 11.579998 12.115997 48.17699 43.640991 77.774984 43.64099 29.354994 0 65.755986-30.914993 77.287983-42.812991 8.654998-8.996998 21.844995-14.335997 35.302992-14.335997 6.509999 0 12.653997 1.22 18.285997 3.657l0.974999 0.414 94.47698 52.516988 0.95 0.658c16.895996 11.751997 23.332995 34.889993 14.945997 53.735989-0.05 0.146-8.532998 19.699996-8.532999 37.545992a98.400979 98.400979 0 0 0 98.254979 98.279978h3.29c15.775997-0.34 28.719994 13.506997 32.817993 35.107993 0.317 1.707 7.899998 42.203991 7.899998 74.069984 0 31.889993-7.582998 72.410984-7.949998 74.117984-4.045999 21.551995-16.991996 35.424992-32.766993 35.059993h-3.291a98.400979 98.400979 0 0 0-98.254979 98.278978c0 17.846996 8.483998 37.449992 8.556999 37.619992a44.42199 44.42199 0 0 1-15.017997 53.710989l-0.927 0.683-96.133979 53.100988-0.975 0.415a44.88499 44.88499 0 0 1-17.846996 3.583999z m222.061952-705.339848a48.76199 48.76199 0 1 1-97.523979 0V121.977194c0-13.457997-10.873998-24.453995-24.307995-24.453995H121.829974c-13.262997 0-24.306995 10.970998-24.306995 24.453995v584.995874c0 13.457997 10.873998 24.453995 24.307995 24.453995h219.499953a48.76199 48.76199 0 1 1 0 97.523979H48.908989A48.76199 48.76199 0 0 1 0 780.191052V48.76121C0 21.822215 21.893995 0.00022 48.907989 0.00022h1023.706781a48.76199 48.76199 0 0 1 48.907989 48.76199v268.189942zM219.427953 975.23701c0-26.940994 21.991995-48.76199 48.981989-48.761989h194.607959a48.76199 48.76199 0 1 1 0 97.523979H268.433942a48.76199 48.76199 0 0 1-49.005989-48.76199z"
                                                        p-id="4266"
                                                    >
                                                    </path>
                                                    </svg>
                                                </span>
                                                <span class="tk-extra-text">系统</span>
                                            </div>
                                            <div class="tk-extra">
                                                <span class="tk-icon __comment">
                                                    <svg
                                                        t="1720770615562"
                                                        viewBox="0 0 1024 1024"
                                                        version="1.1"
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        p-id="6242"
                                                    >
                                                        <path d="M859 79.27H165a90 90 0 0 0-90 90v694a90 90 0 0 0 90 90h694a90 90 0 0 0 90-90v-694a90 90 0 0 0-90-90z m-693 60h694a30 30 0 0 1 30 30v145H136v-145a30 30 0 0 1 30-30z m693 754H165a30 30 0 0 1-30-30v-489h754v489a30 30 0 0 1-30 30z" fill="#878A94" p-id="6243"></path>
                                                        <path d="M223.47 227.98m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#878A94" p-id="6244"></path>
                                                        <path d="M353.08 227.98m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#878A94" p-id="6245"></path>
                                                        <path d="M482.69 227.98m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" fill="#878A94" p-id="6246"></path>
                                                    </svg>
                                                </span>
                                                <span class="tk-extra-text">浏览器</span>
                                            </div>
                                        </div>
                                        <div class="tk-replies tk-replies-expand"></div>
                                    </div>
                                </div>
                            </template>
                            <div class="tk-expand-wrap" style="display: none;">
                                <div class="tk-expand">
                                    查看更多
                                    <div class="el-loading-mask" style="display: none;">
                                        <div class="el-loading-spinner">
                                            <svg viewBox="25 25 50 50" class="circular">
                                                <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tk-footer">
                            Powered By
                            <a href="https://twikoo.js.org" target="_blank">Twikoo</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 侧边栏 -->
        <aside id="sidebar" class="box-aside">
            <!-- 文章目录 -->
            <div id="catalog" class="panel flex-column" style="display: none;">
                <h3>目录</h3>
            </div>

            <!-- 文章归档 -->
            <page-article-archive></page-article-archive>
        </aside>


    </main>



    <page-footer></page-footer>

    <!-- web component -->
    <script src="/js/component.js"></script>
    <!-- style -->
    <script src="/js/style.js"></script>

    <!-- http request -->
    <script src="/js/http.js"></script>
    <!-- article.js -->
    <script type="module" src="/js/article.js"></script>
    <!-- android -->
    <script src="/js/android.js"></script>

    <!-- 推荐 与 反对 -->
    <script type="module">
        import { articleID } from "/js/article.js";

        (async function() {
            const result = await HTTP.request({
                method: "GET",
                url: "/api/configuration/article/like",
            }, false);
            if (!result.data || !result.data.enable) {
                return;
            }

            document.querySelector(".container-like").style.display = "";
            const likeCountElement = document.getElementById("article-info-like-count");
            const unlikeCountElement = document.getElementById("article-info-unlike-count");

            async function getLikeCount() {
                let count = 0;
                const result = await HTTP.request({
                    method: "GET",
                    url: `/api/article/like/count/${articleID}`
                }, false);
                if (result.type === "success") {
                    count = result.data;
                }
                return count;
            }
            async function getUnlikeCount() {
                let count = 0;
                const result = await HTTP.request({
                    method: "GET",
                    url: `/api/article/unlike/count/${articleID}`
                }, false);
                if (result.type === "success") {
                    count = result.data;
                }
                return count;
            }

            (async function () {
                likeCountElement.textContent = await getLikeCount();
                unlikeCountElement.textContent = await getUnlikeCount();
            })()

            function likeArticle() {
                HTTP.request({
                    method: "POST",
                    url: `/api/article/like`,
                    data: {
                        id: articleID || undefined,
                    },
                }).then(async (response) => {
                    const result = response.data;
                    if (result.type === "success") {
                        if (likeCountElement) {
                            likeCountElement.textContent = await getLikeCount();
                        }
                        if (unlikeCountElement) {
                            unlikeCountElement.textContent = await getUnlikeCount();
                        }
                    } else {
                        alert(result.message);
                    }
                });
            }

            function unlikeArticle() {
                HTTP.request({
                    method: "POST",
                    url: `/api/article/unlike`,
                    data: {
                        id: articleID || undefined,
                    },
                }).then(async (response) => {
                    const result = response.data;
                    if (result.type === "success") {
                        if (likeCountElement) {
                            likeCountElement.textContent = await getLikeCount();
                        }
                        if (unlikeCountElement) {
                            unlikeCountElement.textContent = await getUnlikeCount();
                        }
                    } else {
                        alert(result.message);
                    }
                });
            }

            const likeArticleElement = document.getElementsByClassName("like")[0];
            const unlikeArticleElement = document.getElementsByClassName("unlike")[0];
            if (likeArticleElement) {
                likeArticleElement.addEventListener("click", likeArticle);
            }
            if (unlikeArticleElement) {
                unlikeArticleElement.addEventListener("click", unlikeArticle);
            }
        })();
    </script>

    <!-- 评论功能 -->
    <script type="module">
        import { articleID } from "/js/article.js";

        (async function(){

            function loadTwikooScript() {
                return new Promise((resolve) => {
                    const twikooScript = document.createElement("script");
                    twikooScript.async = true;
                    twikooScript.src = "/js/third/twikoo.all.min.js";
                    twikooScript.onload = resolve;
                    document.body.appendChild(twikooScript);
                });
            }

            // twikoo
            const twikooConfiguration = (await HTTP.request({
                method: "GET",
                url: "/api/configuration/twikoo",
            })).data.data;
            // console.log(twikooConfiguration);
            if (twikooConfiguration && twikooConfiguration.enable) {
                // 加载 twikoo
                async function loadTwikoo() {
                    await loadTwikooScript();
                    // const mainElement = document.getElementsByTagName("main")[0];
                    // const twikooDiv = document.createElement("div");
                    // twikooDiv.id = "twikoo";
                    // mainElement.appendChild(document.createElement("hr"));
                    // mainElement.appendChild(twikooDiv);

                    const envID = twikooConfiguration.envID || twikooConfiguration.envId;
                    const region = twikooConfiguration.region;
                    const lang = twikooConfiguration.lang;
                    twikoo.init({
                        el: '#twikoo', // 容器元素
                        envId: envID, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
                        region: region, // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
                        lang: lang,
                        path: `article_${articleID}`
                    }).then(() => {
                        document.getElementById("div-twikoo").style.display = "block";
                    });
                }
                loadTwikoo();
                return;
            }



            // comment
            const commentConfiguration = (await HTTP.request({
                method: "GET",
                url: "/api/configuration/article/comment",
            })).data.data;
            if (!commentConfiguration || !commentConfiguration.enable) {
                return;
            }

            function loadMarkedScript() {
                return new Promise((resolve) => {
                    const script = document.createElement("script");
                    script.src = "/js/third/marked.min.js";
                    script.onload = resolve;
                    document.body.appendChild(script);
                });
            }

            function loadDOMPurifyScript() {
                return new Promise((resolve) => {
                    const script = document.createElement("script");
                    script.src = "/js/third/purify.min.js";
                    script.onload = resolve;
                    document.body.appendChild(script);
                });
            }

            // 初始化评论模块
            let commentInit = false;
            async function initCommentModule() {
                if (commentInit) {
                    return;
                }
                commentInit = true;
                await loadTwikooScript();
                await loadDOMPurifyScript();
                try {
                    if (marked) console.log("marked loaded");
                } catch (e) {
                    console.error(e);
                    await loadMarkedScript();
                }
                const commentContainerElement = document.getElementById("div-comment");
                const formElement = commentContainerElement.querySelector("form");

                // 评论刷新
                const refreshElement = commentContainerElement.querySelector(".comments-refresh")
                refreshElement.onclick = loadAllCommentData;
                initCommentSubmitForm(formElement);
                commentContainerElement.style.display = "";
            }
            function initCommentSubmitForm(formElement, parentCommentID) {
                const previewContainerElement = formElement.querySelector(".tk-preview-container");
                let preview = false;

                // 表单数据验证
                const checkRequired = () => {
                    const submitElement = formElement.querySelector("button[type=submit]");
                    if (
                        formElement.commenter.value &&
                        formElement.commenter_email.value &&
                        formElement.commenter_email.checkValidity() &&
                        formElement.content.value
                    ) {
                        submitElement.removeAttribute("disabled");
                        submitElement.classList.remove("is-disabled");
                    } else {
                        submitElement.setAttribute("disabled", "disabled");
                        submitElement.classList.add("is-disabled");
                    }
                };
                formElement.commenter.onchange = checkRequired;
                formElement.commenter_email.onchange = (e) => {
                    checkRequired();
                    formElement.querySelector("img").src = `/avatar/email/${e.target.value}`;
                }
                formElement.content.oninput = (e) => {
                    checkRequired();
                    // 字数
                    formElement.querySelector(".el-input__count").textContent = `${e.target.value.length}/500`;
                    // 预览功能
                    if (preview) {
                        previewContainerElement.innerHTML = marked.parse(e.target.value);
                    }
                }
                // 预览功能
                formElement.querySelector(".tk-preview").onclick = () => {
                    preview = !preview;
                    if (preview) {
                        previewContainerElement.innerHTML = marked.parse(formElement.content.value);
                        previewContainerElement.style.display = "";
                    } else {
                        previewContainerElement.style.display = "none";
                    }
                }

                // 插入图片
                formElement.querySelector(".tk-submit-action-icon").onclick = () => {
                    alert("暂不支持");
                }

                // 发表评论
                formElement.onsubmit = (e) => {
                    e.preventDefault();
                    const formData = new FormData(formElement);

                    const data = {
                        article_id: articleID,
                        parent_id: parentCommentID,
                    };
                    for (const e of formData.entries()) {
                        data[e[0]] = e[1];
                    }
                    HTTP.request({
                        headers: {
                            token: window.localStorage.getItem("token")
                        },
                        method: "POST",
                        url: "/api/article/comment",
                        data
                    }, false).then(result => {
                        alert(result.message);
                        if (result.type === "success") {
                            formElement.reset();
                            loadAllCommentData();
                        }
                    });
                }
            }
            // 加载所有评论的数据
            async function loadAllCommentData() {
                const container = document.querySelector(".tk-comments-container");

                // 删除旧数据
                container.querySelectorAll(".tk-comment").forEach(item => item.remove());

                // 评论数量
                const commentCount = (await HTTP.request({
                    method: "GET",
                    url: `/api/article/comment/count/${articleID}`
                })).data.data || 0;

                /** @type { HTMLElement } */
                const commentCountElement = container.querySelector(".tk-comments-count");
                if (commentCount !== 0) {
                    commentCountElement.innerHTML = `
                        <span>${commentCount}</span>
                        <span>条评论</span>
                    `;
                } else {
                    commentCountElement.innerHTML = "";
                    return;
                }

                const commentResult = await HTTP.request({
                    method: "GET",
                    url: `/api/article/comment/${articleID}`
                }, false);
                const comments = commentResult.data;
                if (comments && comments.length !== 0) {
                    const spanElement = document.querySelector(".tk-comments-no")
                    if (spanElement) {
                        spanElement.remove();
                    }
                }

                const commentMap = new Map();
                const commentElementMap = new Map();
                // 初始化 map
                for (const c of comments) {
                    commentMap.set(c.id, c);
                }
                // 渲染评论（降序）
                for (const c of comments) {
                    if (c.parent_id) {
                        const parentComment = commentMap.get(c.parent_id);
                        c.content = `回复@${parentComment.commenter}：\n\n` + c.content;
                    }
                    commentElementMap.set(c.id, renderCommentElement(c));
                    if (!c.top_comment_id || !c.parent_id) {
                        const commentElement = commentElementMap.get(c.id);
                        container.appendChild(commentElement);
                    }
                }
                // 渲染回复（升序）
                for(let i = comments.length - 1; i >= 0; i--) {
                    const c = comments[i];
                    if (c.top_comment_id) {
                        const commentElement = commentElementMap.get(c.id);
                        const parentCommentElement = commentElementMap.get(c.top_comment_id);
                        parentCommentElement.querySelector(".tk-replies").appendChild(commentElement);
                    }
                }
                commentElementMap.clear();
            }
            // 渲染评论数据
            function renderCommentElement(comment) {
                const template = document
                    .getElementById("template-comment")
                    .content
                    .firstElementChild;
                const element = template.cloneNode(true);
                const date = new Date(comment.time);
                element.id = `article-comment-${comment.id}`;
                element.querySelector("img").src = `/avatar/email/${comment.commenter_email}`;

                // meta
                const nicknameElement = element.querySelector(".tk-nick");
                if (comment.commenter_site) {
                    nicknameElement.href = comment.commenter_site;
                    nicknameElement.innerHTML = `<strong>${comment.commenter}</strong>`;
                } else {
                    const strong = document.createElement("strong");
                    strong.textContent = comment.commenter;
                    nicknameElement.after(strong);
                    nicknameElement.remove();
                }
                if (comment.is_master) {
                    element.querySelector(".tk-tag").style.display = "";
                }
                const timeElement = element.querySelector("time");
                const dateString = `
                    ${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}
                `
                timeElement.setAttribute("datetime", comment.time);
                timeElement.setAttribute("title", dateString);
                timeElement.textContent = date.toLocaleString();

                // content
                const html = marked.parse(comment.content);
                const pureHTML = DOMPurify.sanitize(html);
                element.querySelector(".tk-content").innerHTML = pureHTML;

                // extra
                const extraElements = element.getElementsByClassName("tk-extra");
                extraElements[0].querySelector(".tk-extra-text").textContent = comment.area || "未知";
                extraElements[1].querySelector(".tk-extra-text").textContent = comment.os || "未知";
                extraElements[2].querySelector(".tk-extra-text").textContent = comment.browser || "未知";

                // 点赞功能
                const actionElements = element.querySelectorAll(".tk-action-link");
                const likeCountElement = actionElements[0].querySelector(".tk-action-count");

                // 获取点赞数量
                async function updateLikeCount() {
                    const countResult = await HTTP.request({
                    method: "GET",
                    url: "/api/article/comment/like/count/" + comment.id
                    }, false);
                    likeCountElement.textContent = countResult.data || "";
                }
                updateLikeCount();

                // 点赞事件
                actionElements[0].onclick = async () => {
                    const likeResult = await HTTP.request({
                        method: "POST",
                        url: "/api/article/comment/like/" + comment.id
                    }, false);
                    if (likeResult.type !== "success") {
                        alert("点赞失败");
                        return;
                    }
                    updateLikeCount();
                };
                // 回复评论
                let replyOpen = false;
                actionElements[1].onclick = async () => {
                    if (replyOpen) {
                        return;
                    }
                    const formElement = document.querySelector(".tk-submit").cloneNode(true);
                    const cancelButtonElement = document.createElement("button");
                    cancelButtonElement.type = "button";
                    cancelButtonElement.className = "el-button tk-cancel el-button--default el-button--small";
                    cancelButtonElement.innerHTML = "<span>取消</span>";
                    cancelButtonElement.onclick = () => {
                        formElement.remove();
                        replyOpen = false;
                    }
                    formElement.querySelector("a").after(cancelButtonElement);
                    initCommentSubmitForm(formElement,comment.id);
                    element.querySelector(".tk-replies").before(formElement);
                    replyOpen = true;
                };
                return element;
            }

            // 加载评论模块
            await initCommentModule();
            loadAllCommentData();
        })();
    </script>

</body>

</html>

